<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('百度ECharts')"/>
    <th:block th:include="include :: toastr-css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"
     style="padding-left: 8px !important; padding-right: 8px; !important">

    <div class="row" >

        <!--支出-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="pay-line-chart"></div>
                </div>
            </div>
        </div>

        <!--收入-->
        <div class="col-sm-6">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="echarts" id="income-line-chart"></div>
                </div>
            </div>
        </div>

        <div class="ibox ">
            <div class="ibox-title">
                <h5>收入支出详情</h5>
            </div>
            <div class="ibox-content">

                <div>
                    本账单共支出                    <strong class="text-danger"><span th:text="${totalPay}"></span></strong>，
                    收入                    <strong class="text-success"><span th:text="${totalIncome}"></span></strong>，
                    不计入                    <strong class="text-warning"><span th:text="${totalIgnore}"></span></strong>
                </div>

                <br>
                <!--分类账单-->
                <h5>分类账单</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th style="text-align: center">账单名称</th>
                            <th style="text-align: center">分类</th>
                            <th style="text-align: center">类型</th>
                            <th style="text-align: center">金额</th>
                        </tr>
                        </thead>
                        <tbody  th:each="item,temp : ${accountClassList}">
                        <tr align="center">
                            <td th:text="${accountName}"></td>
                            <td th:text="${item.className}"></td>
                            <td th:text="${item.classType}"></td>
                            <td th:text="${item.money}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!--月账单-->
                <h5>月账单</h5>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th style="text-align: center">账单名称</th>
                            <th style="text-align: center">日期</th>
                            <th style="text-align: center">支出</th>
                            <th style="text-align: center">收入</th>
                            <th style="text-align: center">不计入</th>
                        </tr>
                        </thead>
                        <tbody  th:each="item,temp : ${accountImonthList}">
                        <tr align="center">
                            <td th:text="${accountName}"></td>
                            <td th:text="${item.moneyDate}"></td>
                            <td th:text="${item.moneyPay} == 0.00 ? '-' : ${item.moneyPay}"></td>
                            <td th:text="${item.moneyIncome} == 0.00 ? '-' : ${item.moneyIncome}"></td>
                            <td th:text="${item.moneyIgnore} == 0.00 ? '-' : ${item.moneyIgnore}"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

        <!--近一年收支情况-->
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div style="height:600px" id="recent-line-chart"></div>
                </div>
            </div>
        </div>

    </div>

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: toastr-js"/>
<script type="text/javascript">

    $.ajax({
        type: "get",
        url: "/account/bill/accountAnalysis/"+'[[${accountId}]]',
        dataType: "json",
        success: function (data) {
            // 支出图
            var pieChart = echarts.init(document.getElementById("pay-line-chart"));
            var pieoption = {
                title: {
                    text: '[[${accountName}]]' + ' 支出统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '支出',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:
                            data.accountClassPay

                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);

            // 收入图
            var pieChart = echarts.init(document.getElementById("income-line-chart"));
            var pieoption = {
                title: {
                    text: '[[${accountName}]]' + ' 收入统计',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '收入',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data:
                        data.accountClassIncome

                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);

        }
    })
    $.ajax({
        type: "get",
        url: "/account/bill/accountAnalysisByMonth/"+'[[${accountId}]]',
        dataType: "json",
        success: function (data) {
            // 近期收支分析
            var pieChart = echarts.init(document.getElementById("recent-line-chart"));
            var pieoption = {
                title: {
                    text: '近一年分析',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['收入', '支出', '不计入'],
                    top: '4%',
                },
                grid: {
                    left: '1%', // 调整左边距
                    right: '1%', // 调整右边距
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisLabel:{
                        interval:0,//横轴信息全部显示
                        rotate:45,//-30度角倾斜显示
                        fontSize:10,// 字体大小
                    },
                    data: data.monthList
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '收入',
                        type: 'line',
                        data: data.incomeList
                    },
                    {
                        name: '支出',
                        type: 'line',
                        data: data.payList
                    },
                    {
                        name: '不计入',
                        type: 'line',
                        data: data.moneyIgnoreList
                    }
                ]
            };
            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);
        }
    })
</script>

</body>
</html>
